/* eslint-disable vue/no-parsing-error */
/* eslint-disable vue/valid-v-if */
<template>
  <div class='container'>
    <el-card class="box-card">
  <div slot="header" class="clearfix">
    <span>试题录入</span>
  </div>
      <!-- 表单 -->
    <el-form :model="form" :rules="rules" ref="ruleForm">
      <el-form-item label="学科" prop="region">
    <el-select v-model="form.region" placeholder="请选择" @change="changeSelect">
      <el-option :label="item.subjectName" :value="item.id" v-for="item in subject" :key="item.id"></el-option>
    </el-select>
      </el-form-item>
      <el-form-item label="目录" prop="mulu">
    <el-select v-model="form.mulu" placeholder="请选择">
      <el-option :label="item.tagName" :value="item.id" v-for="item in mulu" :key="item.id"></el-option>
    </el-select>
      </el-form-item>
      <el-form-item label="企业" prop="qiye">
    <el-select v-model="form.qiye" placeholder="请选择">
      <el-option :label="item.company" :value="item.id" v-for="item in qiye" :key="item.id"></el-option>
    </el-select>
      </el-form-item>
      <el-form-item label="城市" class="city" prop="city">
        <el-select v-model="form.cs" placeholder="请选择">
        <el-option :label="item.province" :value="item.id" v-for="item in qiye" :key="item.id"></el-option>
        </el-select>
        <el-select v-model="form.cs2" placeholder="请选择">
        <el-option :label="item.city" :value="item.id" v-for="item in qiye" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="方向" prop="fx">
      <el-select v-model="form.fx" placeholder="请选择">
        <el-option :label="item.tagName" :value="item.id" v-for="item in fx" :key="item.id"></el-option>
      </el-select>
      </el-form-item>
      <el-form-item label="题型">
        <template>
        <el-radio v-model="radio" label="1">单选</el-radio>
        <el-radio v-model="radio" label="2">多选</el-radio>
        <el-radio v-model="radio" label="3">简答</el-radio>
      </template>
      </el-form-item>
      <el-form-item label="难度">
        <template>
        <el-radio v-model="radios" label="1">简单</el-radio>
        <el-radio v-model="radios" label="2">一般</el-radio>
        <el-radio v-model="radios" label="3">困难</el-radio>
      </template>
      </el-form-item>
      <!-- 富文本编辑器 -->
      <el-form-item label="题干" prop="tg">
        <div class="fuwenb">
        <quill-editor ref="myTextEditor1" v-model="form.content"  style="height:240px;"></quill-editor>
        </div>
      </el-form-item>
      <el-form-item label="选项" class="kp" v-if="radio === '1'">
        <el-card class="box-card">
        <template >
          <el-radio v-model="radioselect" label="1"> A: <el-input v-model="input2" placeholder="请输入内容"></el-input> <el-button>上传<input type="file" class="input"></el-button></el-radio>
          <el-radio v-model="radioselect" label="2"> B: <el-input v-model="input2" placeholder="请输入内容"></el-input> <el-button>上传<input type="file" class="input"></el-button></el-radio>
          <el-radio v-model="radioselect" label="3"> C: <el-input v-model="input2" placeholder="请输入内容"></el-input> <el-button>上传<input type="file" class="input"></el-button></el-radio>
          <el-radio v-model="radioselect" label="4"> D: <el-input v-model="input2" placeholder="请输入内容"></el-input> <el-button>上传<input type="file" class="input"></el-button></el-radio>
        </template>
      </el-card>
      </el-form-item>
        <el-form-item label="选项" class="kp" v-if="radio === '2'">
        <el-card class="box-card">
        <template>
          <el-checkbox  label="1"> A: <el-input v-model="input2" placeholder="请输入内容"></el-input> <el-button>上传<input type="file" class="input"></el-button></el-checkbox>
          <el-checkbox  label="2"> B: <el-input v-model="input2" placeholder="请输入内容"></el-input> <el-button>上传<input type="file" class="input"></el-button></el-checkbox>
          <el-checkbox  label="3"> C: <el-input v-model="input2" placeholder="请输入内容"></el-input> <el-button>上传<input type="file" class="input"></el-button></el-checkbox>
          <el-checkbox  label="4"> D: <el-input v-model="input2" placeholder="请输入内容"></el-input> <el-button>上传<input type="file" class="input"></el-button></el-checkbox>
        </template>
      </el-card>
      </el-form-item>
      <el-form-item label="解析视频" class="hdmc">
         <el-input v-model="form.hdmc"></el-input>
      </el-form-item>
      <el-form-item label="答案解析" prop="dajx">
        <div class="fuwenb">
        <quill-editor ref="myTextEditor2" v-model="form.content2"  style="height:240px;"></quill-editor>
        </div>
      </el-form-item>
      <el-form-item label="题目备注" class="desc">
        <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
        <el-form-item label="试题标签" class="bq">
        <el-select
        v-model="form.bq"
        placeholder="请选择"
        multiple
        filterable
        allow-create
        default-first-option
        >
          <el-option :label="item.tagName" :value="item.id" v-for="item in fx" :key="item.id"></el-option>
        </el-select>
      </el-form-item>
        <el-form-item class="btn" >
          <el-button type="primary" @click="submitForm">确认提交</el-button>
      </el-form-item>
    </el-form>
</el-card>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
// request
import { createAPI, createFormAPI } from '../../utils/request'
export default {
  name: 'questions-new',
  data () {
    return {
      // 表单
      form: {
        region: '',
        mulu: '',
        qiye: '',
        cs: '',
        cs2: '',
        fx: '',
        hdmc: '',
        desc: '',
        bq: '',
        // 富文本内容
        content: '',
        content2: ''

      },
      // 验证规则
      rules: {
        region: [
          { required: true, message: '请选择学科', trigger: 'blur' }
        ],
        mulu: [
          { required: true, message: '请选择目录', trigger: 'blur' }
        ],
        qiye: [
          { required: true, message: '请选择企业', trigger: 'blur' }
        ],
        fx: [
          { required: true, message: '请选择方向', trigger: 'blur' }
        ]
      },
      radio: '2',
      radios: '1',
      radioselect: '1',
      input2: '',
      // 学科
      subject: [],
      // 目录
      mulu: [],
      // 企业
      qiye: [],
      // 方向
      fx: []
    }
  },
  created () {
    // 学科数据请求
    this.getsubject()
    // 企业列表
    this.getcompany()
  },
  methods: {
    submitForm () {
      this.$refs.ruleForm.validate(validata => {
        if (!validata) {
          return
        }
        this.$message({
          message: '添加成功',
          type: 'success'
        })
        this.$router.push('/questions/list')
      })
    },
    // 请求学科数据
    async getsubject () {
      const { data: res } = await createAPI(
        '/subjects', 'get', {
          page: '1',
          pagesize: '100'
        }
      )
      this.subject = res.items
    },
    // 目录数据请求
    async getsubjectml () {
      const { data: res } = await createAPI(
        '/tags', 'get', { subjectID: this.form.region }
      )
      this.mulu = res.items
    },
    // 企业数据
    async getcompany () {
      const { data: res } = await createAPI(
        '/companys', 'get', { page: 1, pagesize: 99 }
      )
      this.qiye = res.items
    },
    async getsubjetfx () {
      const { data: res } = await createFormAPI(
        '/tags', 'get', {
          page: 1,
          pagesize: 99
        }
      )
      this.fx = res.items
    },
    // 监听学科触发
    changeSelect () {
    // 目录请求
      this.getsubjectml()
      // 方向请求
      this.getsubjetfx()
    }
  },
  components: {
    quillEditor
  }
}
</script>

<style scoped lang='less'>
.container {
  padding: 25px;
}
 /deep/ .el-card__body {
  padding-left:80px;
  .el-input__inner {
  width: 469px;
}
}
.city /deep/ .el-input__inner{
  width: 217px;
}
/deep/ .el-select--medium {
  margin-left: 35px;
}
/deep/ .el-radio__inner {
  margin-left: 35px;
}
.fuwenb {
  margin-left: 75px;
}
.hdmc {
  margin-top: 75px;
  .el-input {
    width: 500px;
    margin-left: 8px;
  }
}
.desc {
  margin-top: 75px;
  .el-textarea{
    width: 500px;
    margin-left: 5px;
    /deep/.el-textarea__inner {
      height: 135px;
      resize: none;
    }
  }
}
.bq {
  /deep/ .el-input__inner {
    margin-left:-30px;
  }
}
.btn {
  margin-left: 75px;
}
.kp {
  margin-top: 75px;
  .el-card {
    width: 500px;
    margin-left: 75px;
    box-shadow: none;
    border: none;
  }
  /deep/.el-card__body {
    padding:10px !important;
  }
  /deep/.el-input__inner {
    width: 240px;
    margin-top: 20px;
  }
  /deep/ .el-input {
    width: 260px;
  }
  .el-button {
    position: relative;
    .input {
      position: absolute;
      left: 0;
      right: 0;
    opacity: 0;
  }

  }
}
</style>
